<template>
  <div>
    <!-- 导航栏 -->
    <header>
      <a-row
        class="header-row"
        type="flex"
        justify="space-around"
        align="middle"
      >
        <a-col :xs="24" :sm="24" :md="12" :lg="10" :xl="10">
          <div class="header-left">
            <span class="header-logo" @click="$refs.fullpage.api.moveTo(1)"
              >博客小栈</span
            >
            <span class="header-txt">专注前端开发</span>
          </div>
          <div class="header-right" @click="showDrawer">
            <a-icon type="menu" style="font-size: 20px; color: #999" />
          </div>
          <a-drawer
            title="博客小栈"
            placement="right"
            :closable="false"
            :visible="visible"
            :after-visible-change="afterVisibleChange"
            @close="onClose"
            :bodyStyle="drawerBodyStyleObj"
          >
            <a-menu
              style="border: none"
              @click="xsMenuClicked"
              id="menu"
              :selected-keys="[current]"
            >
              <a-menu-item
                :key="'page2'"
                data-menuanchor="page2"
                @click="basicClick"
              >
                <a href="#page2">
                  <span>基本资料</span>
                </a>
              </a-menu-item>
              <a-menu-item
                :key="'page3'"
                data-menuanchor="page3"
                @click="professionClick"
              >
                <a href="#page3">
                  <span>专业技能</span>
                </a>
              </a-menu-item>
              <a-menu-item
                :key="'page4'"
                data-menuanchor="page4"
                @click="projectClick"
              >
                <a href="#page4">
                  <span>项目经验</span>
                </a>
              </a-menu-item>
            </a-menu>
          </a-drawer>
        </a-col>
        <a-col :xs="0" :sm="0" :md="12" :lg="8" :xl="6">
          <a-menu
            mode="horizontal"
            class="header-menu"
            theme="dark"
            id="menu"
            :selected-keys="[current]"
          >
            <a-menu-item
              :key="'page2'"
              data-menuanchor="page2"
              @click="basicClick"
            >
              <a href="#page2">
                <span>基本资料</span>
              </a>
            </a-menu-item>
            <a-menu-item
              :key="'page3'"
              data-menuanchor="page3"
              @click="professionClick"
            >
              <a href="#page3">
                <span>专业技能</span>
              </a>
            </a-menu-item>
            <a-menu-item
              :key="'page4'"
              data-menuanchor="page4"
              @click="projectClick"
            >
              <a href="#page4">
                <span>项目经验</span>
              </a>
            </a-menu-item>
          </a-menu>
        </a-col>
      </a-row>
    </header>
    <!-- fullpage -->
    <full-page ref="fullpage" :options="fullPageOptions" id="fullpage">
      <div class="section">
        <a-row>
          <a-col class="my_intro animate__animated animate__bounce">
            <h1>GIS</h1>
            <p>博 学 之，审 问 之，慎 思 之，明 辨 之，笃 行 之</p>
            <a-button :size="'large'" type="primary" @click="EnterClick">Enter Blog</a-button>
          </a-col>
        </a-row>
        <div class="next-page" @click="$refs.fullpage.api.moveTo(2)">
          <a-icon type="down" />
        </div>
      </div>
      <div class="section">
        <div class="section2-title">
          <h1 class="page2_title">基本资料</h1>
          <img src="../assets/star.png" alt="" />
        </div>
        <a-row>
          <!-- 基本信息 -->
          <a-col class="my-basic" :xs="12" :sm="12" :md="12" :lg="6">
            <img src="../assets/me.png" width="150px" alt="" />
            <h2>基本信息</h2>
            <p>
              姓名：张童瑶
              <br />
              籍贯：湖北宜昌
            </p>
          </a-col>
          <!-- 毕业院校 -->
          <a-col class="my-school" :xs="12" :sm="12" :md="12" :lg="6">
            <img src="../assets/scholar.png" width="220px" alt="" />
            <h2>毕业院校</h2>
            <p>
              学校：武汉大学
              <br />
              遥感信息工程学院
            </p>
          </a-col>
          <!-- 学历和专业 -->
          <a-col class="my-major" :xs="12" :sm="12" :md="12" :lg="6">
            <img src="../assets/book2.png" width="150px" alt="" />
            <h2>学历和专业</h2>
            <p>
              地图学与地理信息系统
              <br />
              学位：硕士
            </p>
          </a-col>
          <!-- 联系方式 -->
          <a-col class="my-contact" :xs="12" :sm="12" :md="12" :lg="6">
            <img src="../assets/tel_iphone.png" width="130px" alt="" />
            <h2>联系方式</h2>
            <p>
              864443272@qq.com
              <br />
              电话：13476147531
            </p>
          </a-col>
        </a-row>
      </div>
      <div class="section">
        <div class="snow"></div>
        <!-- 专业技能 -->
        <div class="my-skill-title">
          <h1 class="page3_title">专业技能</h1>
          <img src="../assets/star.png" alt="" />
        </div>
        <a-row :gutter="[16, 16]">
          <a-col :md="12" :lg="8">
            <div class="skill-card">
              <!-- 正面卡片 -->
              <div class="skill-card-front">
                <p>PC桌面端</p>
              </div>
              <!-- 背面卡片 -->
              <div class="skill-card-back">
                <p>熟练使用Vue, elementUI等UI框架的使用</p>
                <p>熟悉NestJS等后端技术, 熟悉MySQL数据库</p>
              </div>
            </div>
          </a-col>
          <a-col :md="12" :lg="8">
            <div class="skill-card">
              <!-- 正面卡片 -->
              <div class="skill-card-front">
                <p>移动端</p>
              </div>
              <!-- 背面卡片 -->
              <div class="skill-card-back">
                <p>熟悉微信小程序开发及上线流程</p>
                <p>熟悉百分比布局, rem布局等布局方式</p>
              </div>
            </div>
          </a-col>
          <a-col :md="12" :lg="8">
            <div class="skill-card">
              <!-- 正面卡片 -->
              <div class="skill-card-front">
                <p>其他技能</p>
              </div>
              <!-- 背面卡片 -->
              <div class="skill-card-back">
                <p>熟悉git, 对团队协作开发有一定认识</p>
                <p>自主学习能力强, 容易接受新技术</p>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
      <div class="section">
        <div class="my-project-title">
          <h1 class="page4_title">项目经验</h1>
          <img src="../assets/star.png" alt="" />
        </div>
        <a-row :gutter="[16, 16]">
          <a-col :md="12" :lg="8">
            <div class="box">
              <div class="front-face">
                <img
                  src="../assets/1(4).png"
                  style="border-radius: 100%"
                  alt=""
                />
                <span>OA 办公系统</span>
              </div>
              <div class="back-face">
                <span>OA 办公系统</span>
                <p>
                  武昌区劳动局监察执法系统<br />
                  <strong>技术栈：</strong>SpringBoot、Vue
                </p>
              </div>
            </div>
          </a-col>
          <a-col :md="12" :lg="8">
            <div class="box">
              <div class="front-face">
                <img
                  src="../assets/bridge.png"
                  style="border-radius: 100%"
                  alt=""
                />
                <span>地图数据管理</span>
              </div>
              <div class="back-face">
                <span>地图数据管理</span>
                <p>
                  中铁大桥局一公司市场部大数据智慧平台建设<br />
                  <strong>技术栈：</strong>微信小程序、NestJS、MongoDB
                </p>
              </div>
            </div>
          </a-col>
          <a-col :md="12" :lg="8">
            <div class="box">
              <div class="front-face">
                <img
                  src="../assets/GWR.jpg"
                  style="border-radius: 100%"
                  alt=""
                />
                <span>地理加权回归分析</span>
              </div>
              <div class="back-face">
                <span>地理加权回归分析</span>
                <p>
                  GWModelDeskTop桌面端软件开发<br />
                  <strong>技术栈：</strong>Qt、C++
                </p>
              </div>
            </div>
          </a-col>
        </a-row>
      </div>
    </full-page>
  </div>
</template>

<script>
export default {
  data() {
    return {
      // 抽屉显示隐藏
      visible: false,
      // 抽屉样式对象
      drawerBodyStyleObj: {
        padding: "24px 0",
      },
      fullPageOptions: {
        licenseKey: "YOUR_KEY_HEERE",
        anchors: ["page1", "page2", "page3", "page4"],
        navigation: true,
        menu: "#menu",
        sectionsColor: ["#fff", "#fff", "#fff", "#fff"],
        scrollOverflow: true,
        afterLoad: this.afterLoad,
        onLeave: this.onLeave,
      },
      current: "welcome",
    };
  },
  methods: {
    // 控制抽屉
    afterVisibleChange(val) {
      //console.log("visible", val);
    },
    showDrawer() {
      this.visible = true;
    },
    onClose() {
      this.visible = false;
    },
    // 小屏菜单点击
    xsMenuClicked() {
      this.visible = false;
    },
    // fullpage
    // 基本资料点击
    basicClick() {
      this.$refs.fullpage.api.moveTo(2);
      this.current = "page2";
    },
    // 专业技能点击
    professionClick() {
      this.$refs.fullpage.api.moveTo(3);
      this.current = "page3";
    },
    // 项目经验点击
    projectClick() {
      this.$refs.fullpage.api.moveTo(4);
      this.current = "page4";
    },
    EnterClick() {
      this.$router.push("home");
    },
    afterLoad(link, index) {
      if (index.anchor == "page2") {
        document
          .getElementsByClassName("section2-title")[0]
          .classList.add("animate-zoomInDown");
        document
          .getElementsByClassName("my-basic")[0]
          .classList.add("animate-bounceIn");
        document
          .getElementsByClassName("my-school")[0]
          .classList.add("animate-lightSpeedInRight");
        document
          .getElementsByClassName("my-major")[0]
          .classList.add("animate-rubberBand");
        document
          .getElementsByClassName("my-contact")[0]
          .classList.add("animate-bounceInUp");
      }
      if (index.anchor == "page3") {
        document
          .querySelector(".my-skill-title")
          .classList.add("animate-bounceInLeft");
      }
      if (index.anchor == "page4") {
        document
          .querySelectorAll(".box")
          .forEach((v) => v.classList.add("animate-zoomInDown"));
        document
          .querySelector(".my-project-title")
          .classList.add("animate-zoomInUp");
      }
    },
    onLeave(index, nextIndex, direction) {
      this.current = nextIndex.anchor;
      if (index.anchor == "page2") {
        document
          .getElementsByClassName("section2-title")[0]
          .classList.remove("animate-zoomInDown");
        document
          .getElementsByClassName("my-basic")[0]
          .classList.remove("animate-bounceIn");
        document
          .getElementsByClassName("my-school")[0]
          .classList.remove("animate-lightSpeedInRight");
        document
          .getElementsByClassName("my-major")[0]
          .classList.remove("animate-rubberBand");
        document
          .getElementsByClassName("my-contact")[0]
          .classList.remove("animate-bounceInUp");
      }
      if (index.anchor == "page3") {
        document
          .querySelector(".my-skill-title")
          .classList.remove("animate-bounceInLeft");
      }
      if (index.anchor == "page4") {
        document
          .querySelectorAll(".box")
          .forEach((v) => v.classList.remove("animate-zoomInDown"));
        document
          .querySelector(".my-project-title")
          .classList.remove("animate-zoomInUp");
      }
    },
  },
};
</script>

<style lang="less" scoped>
// 整体布局
header {
  position: fixed;
  top: 0;
  width: 100%;
  height: 48px;
  background-color: rgba(0, 0, 0, 0.7);
  box-shadow: 0 1px 4px rgba(89, 90, 89, 0.28);
  transition: all 0.3s;
  z-index: 9;
}
.header-row {
  height: 100%;
  .ant-col:nth-child(1) {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-right: 15px;
    .header-logo{
      cursor: pointer;
    }
    .header-right {
      display: none;
      cursor: pointer;
    }
  }
}
.header-logo {
  color: #1e90ff;
  font-size: 22.4px;
}
.header-txt {
  font-size: 9.6px;
  color: #999;
  display: inline-block;
  padding-left: 4.8px;
}
.header-menu {
  display: flex;
  justify-content: center;
  /deep/ span,
  i {
    color: #fff;
  }
  background-color: transparent;
  border-bottom: none;
}
.active {
  background-color: #1890ff;
}
// 第一屏
.section:nth-child(1) {
  background: url("../assets/index_pic1.jpg") no-repeat center;
  background-size: cover;
}
.my_intro {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  h1 {
    color: #666;
    font-size: 55px;
    font-weight: bolder;
  }
  p {
    font-size: 20px;
    margin-bottom: 35px;
  }
}
// 下一页
.next-page {
  position: absolute;
  margin-left: -35px;
  left: 50%;
  bottom: 10%;
  border: 2px solid rgba(255, 255, 255, 0.7);
  width: 70px;
  height: 70px;
  border-radius: 50%;
  line-height: 80px;
  overflow: hidden;
  background: rgba(0, 0, 0, 0.2);
  transition: 1s all ease;
  animation: fadeInUp 2s ease;
  display: flex;
  align-items: center;
  justify-content: center;
  &:hover {
    cursor: pointer;
  }
  .anticon {
    font-size: 40px;
    font-weight: bold;
    color: yellowgreen;
    animation: fadeInDown 2s linear infinite;
  }
}
// 第二屏
.section:nth-child(2) {
  background: url("../assets/index_pic2.jpg") no-repeat center;
  background-size: cover;
  .section2-title {
    text-align: center;
    h1 {
      color: #fff;
      font-size: 40px;
      font-weight: bolder;
      text-align: center;
    }
  }
  .ant-row {
    display: flex;
    flex-wrap: wrap;
  }
}
.my-basic,
.my-school,
.my-major,
.my-contact {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
  h2 {
    color: #fff;
  }
}
// 第三屏
.section:nth-child(3) {
  background: url("../assets/index_pic3.jpg") no-repeat center;
  background-size: cover;
  perspective: 1000px;
  .my-skill-title {
    text-align: center;
    h1 {
      color: #fff;
      font-size: 40px;
      font-weight: bolder;
    }
    margin-bottom: 25px;
  }
  .snow {
    background: url("../assets/snow10.png"), url("../assets/snow15.png"),
      url("../assets/snow20.png");
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 999;
    animation: snowfall 30s linear infinite;
  }
  .ant-row {
    .ant-col {
      display: flex;
      justify-content: center;
      align-items: center;
      .skill-card {
        position: relative;
        z-index: 99999;
        width: 350px;
        height: 150px;
        border-radius: 30px;
        cursor: pointer;
        background: linear-gradient(-135deg, #00000090, #43434390);
        box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.1);
        transform-style: preserve-3d;
        animation: rotate_reverse 1.2s cubic-bezier(0.66, -0.47, 0.33, 1.5)
          forwards;
        &:hover {
          animation: my_rotate 1.2s cubic-bezier(0.66, -0.47, 0.33, 1.5)
            forwards;
        }
        .skill-card-front {
          p {
            font-size: 25px;
            color: #1890ff;
            font-weight: bold;
            backface-visibility: hidden;
            margin: 0 !important;
          }
        }
        .skill-card-front,
        .skill-card-back {
          position: absolute;
          top: 0;
          left: 0;
          width: 100%;
          height: 100%;
          color: #fff;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          font-size: 1.3em;
        }
        .skill-card-back {
          transform: rotateY(180deg);
          backface-visibility: hidden;
        }
      }
    }
  }
}
// 第四屏
.section:nth-child(4) {
  background: url("../assets/base.jpg") no-repeat center;
  background-size: cover;
  .my-project-title {
    text-align: center;
    h1 {
      color: #fff;
      font-size: 40px;
      font-weight: bolder;
    }
    margin-bottom: 25px;
  }
  .ant-row {
    .ant-col {
      display: flex;
      justify-content: center;
      align-items: center;
      .box {
        width: 350px;
        margin: 0 auto;
        position: relative;
        perspective: 1000px;
        .front-face {
          border-radius: 5px;
          background: #eee;
          height: 150px;
          width: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
          transition: all 0.5s ease;
          span {
            font-size: 20px;
            font-weight: 600;
          }
        }
        .back-face {
          border-radius: 5px;
          position: absolute;
          top: 0;
          left: 0;
          z-index: 1;
          height: 150px;
          width: 100%;
          padding: 30px;
          color: #fff;
          opacity: 0;
          transform-style: preserve-3d;
          backface-visibility: hidden;
          background: linear-gradient(-135deg, #4b6cb7, #182848);
          transform: translateY(110px) rotateX(-90deg);
          box-shadow: 0px 5px 20px 0px rgba(0, 81, 250, 0.1);
          transition: all 0.5s ease;
          p {
            margin-top: 10px;
            text-align: justify;
          }
          span {
            font-size: 20px;
            font-weight: 600;
            text-transform: uppercase;
          }
        }
        &:hover {
          .front-face {
            opacity: 0;
            transform: translateY(-110px) rotateX(90deg);
          }
          .back-face {
            opacity: 1;
            transform: rotateX(0deg);
          }
        }
      }
    }
  }
}
// 响应式布局
@media screen and (max-width: 768px) {
  .header-row {
    .ant-col:nth-child(1) {
      .header-right {
        display: block;
      }
    }
  }
  .section:nth-child(1) {
    .my_intro {
      h1 {
        font-size: 35px;
      }
      p {
        font-size: 16px;
      }
    }
  }
  .section:nth-child(2) {
    .section2-title {
      display: none !important;
    }
  }
  .section:nth-child(3) {
    .my-skill-title {
      display: none !important;
    }
  }
  .section:nth-child(4) {
    .my-project-title {
      display: none !important;
    }
  }
}
// 动画区
.animate-zoomInDown {
  animation: zoomInDown 2s ease forwards;
}
.animate-zoomInUp {
  animation: zoomInUp 2s ease forwards;
}
.animate-bounceIn {
  animation: bounceIn 2s ease;
}
.animate-lightSpeedInRight {
  animation: lightSpeedInRight 2s ease forwards;
}
.animate-rubberBand {
  animation: rubberBand 2s ease forwards;
}
.animate-bounceInUp {
  animation: bounceInUp 2s ease forwards;
}
.animate-bounceInLeft {
  animation: bounceInLeft 2s linear forwards;
}
.animate-bounceInRight {
  animation: bounceInRight 2s linear forwards;
}
@keyframes snowfall {
  0% {
    background-position: 0 0, 0 0, 0 0;
  }
  100% {
    background-position: 200px 500px, -200px 600px, 200px 1000px;
  }
}
@keyframes my_rotate {
  0% {
    transform: rotateY(0);
  }
  100% {
    transform: rotateY(180deg);
  }
}
@keyframes rotate_reverse {
  0% {
    transform: rotateY(180deg);
  }
  100% {
    transform: rotateY(0);
  }
}
</style>